<template>
  <div class="role">
    <mains :title="'角色管理'">
      <template #btn>
        <Button type="primary" ghost class="del">删除</Button>
        <Button type="primary" @click="goAddAdmin">新增角色</Button>
      </template>
      <template #content>
        <Card>
          <!-- 搜索区域 -->
          <div class="search-box">
            <Input v-model="txt" placeholder="请输入角色名称" style="width: 300px" class="inp" />
            <Button type="primary">搜索</Button>
          </div>
          <!-- 表格 -->
          <tables ref="selection" :columns="columns" :data="data"></tables>
          <!-- 分页 -->
           <pages :total="total" :page-size="10" />
        </Card>
      </template>
    </mains>
  </div>
</template>

<script setup>
import mains from '@/components/main.vue'
import pages from '@/components/pageNation.vue'
import tables from '@/components/systemTable.vue'
import { ref } from 'vue'
import { useRouter } from 'vue-router';
const router = useRouter();

const txt = ref('');
const columns = ref([
  {
    type: 'selection',
    width: 60,
    align: 'center',
  },
  {
    title: '角色名称',
    key: 'rolename',
    align: 'center'
  },
  {
    title: '角色下管理员人数',
    key: 'count',
    align: 'center'
  },
  {
    title: '角色描述',
    key: 'describe',
    align: 'center'
  },
  {
    title: '是否启用',
    slot: 'content',
    align: 'center'
  },
  {
    title:'添加时间',
    key: 'time',
    align: 'center'
  },
  {
    title: '操作',
    slot: 'action',
    width: 150,
    align: 'center'
  }
])
const data = ref([
  {
    rolename: '超级管理员',
    count:'3',
    describe:'最高权限的角色，不可删除',
    isEnable:0,
    time:'2020/09/08 10:20'
  },
  {
    rolename: '超级管理员',
    count:'3',
    describe:'最高权限的角色，不可删除',
    isEnable:1,
    time:'2020/09/08 10:20'
  },
  {
    rolename: '超级管理员',
    count:'3',
    describe:'最高权限的角色，不可删除',
    isEnable:0,
    time:'2020/09/08 10:20'
  },
  {
    rolename: '超级管理员',
    count:'3',
    describe:'最高权限的角色，不可删除',
    isEnable:0,
    time:'2020/09/08 10:20'
  }
])

// 分页
const total = ref(100); // 总条数

const goAddAdmin = ()=>{
  router.push('/home/addRole')
}
</script>

<style>
.role { 
  .del{
    margin-right: 10px;
  }
  .search-box{
    .inp{
      margin-right: 10px;
    }
  }
}
</style>
